---
title: AssistantModalPrimitive
---

A modal chat UI usually displayed in the bottom right corner of the screen.

import { Code } from "@radix-ui/themes";
import { ParametersTable, DataAttributesTable } from "@/components/docs";

## Anatomy

```tsx
import { AssistantModalPrimitive } from "@assistant-ui/react";

const Thread = () => (
  <AssistantModalPrimitive.Root>
    <AssistantModalPrimitive.Trigger>
      <FloatingAssistantButton />
    </AssistantModalPrimitive.Trigger>
    <AssistantModalPrimitive.Content>
      <Thread />
    </AssistantModalPrimitive.Content>
  </AssistantModalPrimitive.Root>
);
```

## API Reference

### Root

Contains all parts of the assistant modal.

<ParametersTable
  type="AssistantModalPrimitiveRootProps"
  parameters={[
    {
      name: "defaultOpen",
      type: "boolean",
      default: "false",
      description:
        "The open state of the assistant modal when it is initially rendered. Use when you do not need to control its open state.",
    },
    {
      name: "open",
      type: "boolean",
      description:
        "Not recommended. The controlled open state of the assistant modal. Must be used in conjunction with onOpenChange.",
    },
    {
      name: "onOpenChange",
      type: "(open: boolean) => void",
      description:
        "Event handler called when the open state of the assistant modal changes.",
    },
    {
      name: "modal",
      type: "boolean",
      default: "false",
      description:
        "The modality of the assistant modal. When set to true, interaction with outside elements will be disabled and only modal content will be visible to screen readers.",
    },
  ]}
/>

### Trigger

A button that toggles the open state of the assistant modal. `AssistantModalPrimitive.Content` will position itself against this button.

This primitive renders a `<button>` element unless `asChild` is set.

<ParametersTable
  type="AssistantModalPrimitiveTriggerProps"
  parameters={[
    {
      name: "asChild",
    },
  ]}
/>

<DataAttributesTable
  data={[
    {
      attribute: "[data-state]",
      values: <Code>"open" | "closed"</Code>,
    },
  ]}
/>

### Anchor

The anchor element that the assistant modal is attached to. Defaults to the `Trigger` element.

This primitive renders a `<div>` element unless `asChild` is set.

### Content

The component that pops out when the assistant modal is open.

This primitive renders a `<div>` element unless `asChild` is set.

<ParametersTable
  type="AssistantModalPrimitiveContentProps"
  parameters={[
    {
      name: "asChild",
    },
    {
      name: "side",
      type: "'top' | 'right' | 'bottom' | 'left'",
      default: "'top'",
      description: "The side of the assistant modal to position against.",
    },
    {
      name: "align",
      type: "'start' | 'center' | 'end'",
      default: "'end'",
      description: "The alignment of the assistant modal to position against.",
    },
    {
      name: "dissmissOnInteractOutside",
      type: "boolean",
      default: "false",
      description:
        "Dismiss the assistant modal when the user interacts outside of it.",
    },
  ]}
/>

Refer to Radix UI's Documentation for [Popover.Content](https://www.radix-ui.com/primitives/docs/components/popover#content) for more details.
